<template>
  <div class="w-bar-chart"></div>
</template>

<script type='text/babel'>
  import $ from 'jquery'
  import WCommons from '../../../../static/js/wanba.commons'
  import ChartMixins from './ChartMixins'

  var _resolveDatas = function (component) {
    var a = component.chartAdapter
    var result = []
    var datas = a.seriesDatas()
    if ($.isArray(datas)) {
      datas.forEach(function (item) {
        var label = item.label
        var value = item.value
        if (typeof label === 'function') {
          label = label.call(a, item)
        }
        if (typeof value === 'function') {
          value = value.call(a, item)
        }
        result.push([label, value])
      })
    }
    return result
  }

  export default {
    mixins: [ChartMixins],
    props: {
      tooltipLabel: {
        type: String,
        default: ''
      },
      tooltipFormat: {
        type: String,
        default: '<b>{point.y}</b>'
      },
      barFillColor: {
        type: String,
        default: '#dddddd'
      },
      barBorderColor: {
        type: String,
        default: '#ffffff'
      },
      barBorderWidth: {
        type: Number,
        default: 1
      },
      barHoverBrightness: {
        type: Number,
        default: -0.2
      },
      xAxisGridLineColor: {
        type: String,
        default: '#eeeeee'
      },
      xAxisGridLineWidth: {
        type: String,
        default: 0
      },
      xAxisLineColor: {
        type: String,
        default: ''
      },
      xAxisLineWidth: {
        type: Number,
        default: 0
      },
      xAxisLabelTextColor: {
        type: String,
        default: '#333333'
      },
      xAxisLabelTextSize: {
        type: Number,
        default: 12
      },
      xAxisLabelTextFamily: {
        type: String,
        default: 'sans-serif'
      },
      xAxisLabelRotation: {
        type: Number,
        default: 0
      },
      yAxisGridLineColor: {
        type: String,
        default: '#eeeeee'
      },
      yAxisGridLineWidth: {
        type: String,
        default: 1
      },
      yAxisLineColor: {
        type: String,
        default: ''
      },
      yAxisLineWidth: {
        type: Number,
        default: 0
      },
      yAxisLabelTextColor: {
        type: String,
        default: '#333333'
      },
      yAxisLabelTextSize: {
        type: Number,
        default: 12
      },
      yAxisLabelTextFamily: {
        type: String,
        default: 'sans-serif'
      },
      yAxisLabelRotation: {
        type: Number,
        default: 0
      }
    },
    created: function () {
      var self = this
      WCommons.extends(self.chartAdapter, {
        seriesDatas: function () {
          throw new Error('adapter的seriesData()方法未实现')
        }
      })
    },
    resolveDatasetChanged: function () {
      var self = this
      self.$options.chart.series[0].setData(_resolveDatas(self))
    },
    preConfigChartOptions: function () {
      var self = this
      return {
        chart: {
          type: 'column',
          width: self.chartWidth,
          height: self.chartHeight
        },
        title: {
          text: self.chartTitle
        },
        subtitle: {
          text: ''
        },
        plotOptions: {
          column: {
            groupPadding: 0,
            pointPadding: 0,
            borderColor: self.barBorderColor,
            borderWidth: self.barBorderWidth
          },
          series: {
            color: self.barFillColor,
            states: {
              hover: {
                brightness: self.barHoverBrightness
              }
            },
            cursor: 'pointer'
          }
        },
        xAxis: {
          type: 'category',
          tickLength: 0,
          gridLineColor: self.xAxisGridLineColor,
          gridLineWidth: self.xAxisGridLineWidth,
          lineColor: self.xAxisLineColor,
          lineWidth: self.xAxisLineWidth,
          labels: {
            rotation: self.xAxisLabelRotation,
            style: {
              fontSize: self.xAxisLabelTextSize + 'px',
              fontFamily: self.xAxisLabelTextFamily,
              color: self.xAxisLabelTextColor
            },
            step: 2
          },
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: ''
          },
          tickLength: 0,
          gridLineColor: self.yAxisGridLineColor,
          gridLineWidth: self.yAxisGridLineWidth,
          lineColor: self.yAxisLineColor,
          lineWidth: self.yAxisLineWidth,
          labels: {
            rotation: self.xAxisLabelRotation,
            style: {
              fontSize: self.yAxisLabelTextSize + 'px',
              fontFamily: self.yAxisLabelTextFamily,
              color: self.yAxisLabelTextColor
            }
          }
        },
        legend: {
          enabled: false
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: self.tooltipLabel + self.tooltipFormat
        },
        series: [{
          name: '',
          data: (function () {
            return _resolveDatas(self)
          })(),
          dataLabels: {
            enabled: false,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
              fontSize: '12px',
              fontFamily: 'sans-serif'
            }
          }
        }]
      }
    }
  }
</script>

<style lang='less'>
</style>
